<template>
  <div id="container">
    <div id="header">
      <div class="logo">
        <img src="../assets/img/logo.png" alt="logo" style="max-width: 100px; height: auto;">
      </div>
      <div class="title">
        <div class="h1">社区养老服务管理系统</div>
      </div>
      <div class="link">
        <el-button class="plain-button" text @click="toLogin" style="color: rgb(99 184 255) !important;"
          link>登录</el-button>
      </div>
    </div>
    <div id="body">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <h1 class="info">用户注册</h1>
          </div>
        </template>
        <div class="registerwin">
          <el-alert
            title="注册须知"
            type="info"
            :description="'为确保社区服务质量，新用户注册后需要等待管理员审核（1-2个工作日）。审核结果将通过手机短信通知，审核通过后即可登录使用系统。'"
            :closable="false"
            show-icon
            class="register-notice"
          />
          <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="100px" :size="formSize" status-icon>
            <div class="registerform">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" class="input" placeholder="请输入5-10位数字或字母" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input 
                  type="password" 
                  v-model="form.password" 
                  :placeholder="'6-18位字母、数字或下划线，字母开头'" 
                  class="input"
                  show-password 
                />
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="form.checkPass" placeholder="请再次输入密码" class="input" show-password />
              </el-form-item>
              <el-form-item label="身份证号" prop="idNum">
                <el-input v-model="form.idNum" class="input" placeholder="请输入18位身份证号码" />
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" class="input" placeholder="请输入真实姓名" />
              </el-form-item>
              <el-form-item label="手机号" prop="telephone">
                <el-input v-model="form.telephone" class="input" placeholder="请输入11位手机号" />
              </el-form-item>
              <el-form-item class="button-group">
                <el-button type="primary" @click="onSubmit(ruleFormRef)">立即注册</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
    <div id="footer">
      <!-- <img src="../assets/img/footer.png" alt="" class="imgFooter"> -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeUnmount } from 'vue'
//   import axios from 'axios'
import $axios from '../utils/axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
// import { Plus } from '@element-plus/icons-vue'

const router = useRouter()

const toLogin = () => {
  router.push("/login")
}

const formSize = ref('default')
const ruleFormRef = ref()
//表单 密码双重验证规则
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入确认密码！'))
  } else if (value !== form.value.password) {
    callback(new Error("确认密码与密码不匹配！"))
  } else {
    callback()
  }
}
//其他规则
const rules = reactive({
  username: [
    {
      required: true, //必填规格
      message: '请输入用户名', //违反规则提示的信息
      trigger: 'blur' //失去焦点时触发
    },
    {
      min: 5,
      max: 10,
      message: '5-10个数字或字母组合',
      trigger: 'blur'
    }
  ],
  name: [
    {
      required: true, //必填规格
      message: '请输入真实姓名', //违反规则提示的信息
      trigger: 'blur' //失去焦点时触发
    }
  ],
  idNum: [
    {
      required: true,
      message: '请输入身份证号',
      trigger: 'blur'
    },
    {
      pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9]|1[0-2]))(([0-2][1-9]|10|20|30|31))\d{3}[0-9Xx]$/,
      message: '请正确输入18位的证件号码',
      trigger: 'change'
    }
  ],
  telephone: [
    {
      required: true, //必填规格
      message: '请输入手机号', //违反规则提示的信息
      trigger: 'blur' //失去焦点时触发
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '手机号码格式不正确',
      trigger: 'change'
    }
  ],
  password: [
    {
      required: true, //必填规格
      message: '请输入密码', //违反规则提示的信息
      trigger: 'blur' //失去焦点时触发
    },
    {
      pattern: /^[a-zA-Z]\w{5,18}$/,
      message: '只能包含字母、数字、下划线,以字母开头',
      trigger: 'change'
    },
    {
      min: 6,
      max: 18,
      message: '6-18个字符',
      trigger: 'blur'
    }
  ],
  checkPass: [
    { validator: validatePass2, required: true, trigger: 'change' }
  ]
})

// do not use same name with ref
const form = ref({})

// const imageUrl = ref('');
// const fileList = ref([]);
// // 创建一个FormData对象来处理头像文件
// // const avatarFormData = new FormData();
// // 头像
// const beforeAvatarUpload = (file) => {
//   const isJPG = file.type === 'image/jpeg';
//   const isPNG = file.type === 'image/png';
//   const isLt2M = file.size / 1024 / 1024 < 2;

//   if (!isJPG && !isPNG) {
//     ElMessage.error('只能上传 JPG/PNG 格式的图片');
//     return false;
//   }
//   if (!isLt2M) {
//     ElMessage.error('图片大小不能超过 2MB');
//     return false;
//   }

//   // imageUrl.value = '';
//   // avatarFormData.value.delete('avatar');
//   // avatarFormData.value.append('avatar', file);
//   fileList.value = [file];
//   form.value.avatar = file.raw;

//   return false; // 返回 false 禁止自动上传
//   // return true; // 返回 true 允许自动上传
// };

// /**
//  * 
//  * @param { `file` 参数是当前要上传的文件对象，如果需要获取文件的二进制数据，可以通过 `file.raw` 来获取。} file 
//  * @param {*} fileList 
//  */
// const handleChange = (file, fileList) => {
//   fileList.value = [file]; // 更新 fileList 值
// };

// /**
//  * 
//  * @param {*`response` 参数应该是上传成功后的响应数据，如果响应数据中包含了头像图片的地址，可以通过 `response.data.url` 获取到图片的链接} response 
//  */
// const handleAvatarSuccess = (response) => {
//   imageUrl.value = response.data.url; // 根据后端接口返回的图片链接字段进行修改
// };

const countdown = ref(5)// 倒计时秒数，默认为 5
let timer; // 定时器
const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      $axios.put('/user/register', form.value).then(res => {
        if (res.data.code === 200) {
          ElMessage({
            message: '注册成功！请等待管理员审核（1-2个工作日），审核通过后将通过短信通知您。',
            type: 'success',
            duration: 5000
          })
          // 显示审核提示对话框
          ElMessageBox.alert(
            '您的注册申请已提交成功！\n\n' +
            '• 我们将在1-2个工作日内完成审核\n' +
            '• 审核结果将通过短信发送到您的手机\n' +
            '• 审核通过后，您可以使用账号密码登录系统\n\n' +
            '感谢您的耐心等待！',
            '注册成功',
            {
              confirmButtonText: '我知道了',
              type: 'success',
              callback: () => {
                router.push('/login')
              }
            }
          )
        } else if (res.data.code === 104) {
          ElMessage.error('用户名已存在，请更换其他用户名')
        } else if (res.data.code === 105) {
          ElMessage.error('该手机号已被注册，请更换其他手机号')
        } else {
          ElMessage.error(res.data.msg || '注册失败，请稍后重试')
        }
      }).catch(error => {
        console.error('注册失败:', error)
        ElMessage.error('系统繁忙，请稍后重试')
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 在组件销毁或离开时清除 timer
onBeforeUnmount(() => {
  clearInterval(timer);
});

const resetForm = (formEl) => {
  formEl.resetFields()
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style lang="scss" scoped>
#container {
  min-height: 100vh;
  background-color: #f5f7fa;
  
  #header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;

    .logo {
      position: absolute;
      left: 40px;
      top: 50%;
      transform: translateY(-50%);

      img {
        height: 40px;
        width: auto;
      }
    }

    .title {
      position: absolute;
      left: 160px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      font-weight: bold;
      color: #303133;
    }

    .link {
      position: absolute;
      right: 40px;
      top: 50%;
      transform: translateY(-50%);

      .plain-button {
        font-size: 14px;
        color: #409EFF !important;
      }
    }
  }

  #body {
    padding-top: 80px;
    padding-bottom: 40px;
    min-height: calc(100vh - 60px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../assets/img/login5.jpg");

    .box-card {
      width: 580px;
      margin: 0 auto;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .card-header {
        border-bottom: 1px solid #EBEEF5;
        padding: 15px 20px;

        .info {
          margin: 0;
          font-size: 18px;
          color: #303133;
        }
      }

      .registerwin {
        padding: 20px;

        .register-notice {
          margin-bottom: 24px;
        }

        .registerform {
          .input {
            width: 100%;
          }

          .button-group {
            margin-top: 30px;
            text-align: center;
            
            :deep(.el-form-item__content) {
              justify-content: center;
              gap: 20px;
            }
          }
        }
      }
    }
  }
}

.register-notice {
  border-radius: 4px;
  
  :deep(.el-alert__title) {
    font-size: 16px;
    font-weight: bold;
  }

  :deep(.el-alert__description) {
    font-size: 14px;
    line-height: 1.6;
    margin: 8px 0;
    color: #606266;
  }
}
</style>